<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!--上架下架-->
    <!--上架下架-->
    <!--上架下架-->

</head>
<body>
<div id="app">
    <el-form :inline="true" label-width="70px" :model="formLabelAlign">
        <el-form-item label="审核题目">
            <el-input v-model="formLabelAlign.total"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="formLabelAlign.author"></el-input>
        </el-form-item>

        <el-form-item label="审核状态">
            <el-input v-model="formLabelAlign.status"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit()">搜索</el-button>
        </el-form-item>
    </el-form>



    <template >
        <el-table
                :data="newBsscArr"
                border

                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="申请编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="新闻题目"
                    width="270">
            </el-table-column>
            <el-table-column
                    prop="category.category"
                    label="新闻类别"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者" width="110">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="申请时间"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="auditor"
                    label="审核人" width="100">
            </el-table-column>
            <el-table-column
                    prop="status.status"
                    label="状态" width="100"
                     style="background-color: peachpuff">
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.status.status=='审核成功'">
                        <el-button type="info" @click="details(scope.row.id)">详情</el-button>
                        <el-button type="success" @click="shang(scope.row.id)">上架</el-button>
                        <el-button type="danger" @click="zhi(scope.row.id)">新闻置顶</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='上架'">
                        <el-button type="info" @click="details(scope.row.id)">详情</el-button>
                        <el-button type="warning" @click="xia(scope.row.id)">下架</el-button>
                        <el-button type="danger" @click="zhi(scope.row.id)">新闻置顶</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='被下架了'">
                        <el-button type="info" @click="details(scope.row.id)">详情</el-button>
                        <el-button type="success" @click="shang(scope.row.id)">上架</el-button>
                        <el-button type="danger" @click="zhi(scope.row.id)">新闻置顶</el-button>
                    </div>
                    <div v-if="scope.row.status.status=='新闻置顶'">
                        <el-button type="info" @click="details(scope.row.id)">详情</el-button>
                        <el-button type="warning" @click="xia(scope.row.id)">下架</el-button>
                        <el-button type="danger"  disabled>新闻置顶</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <el-pagination
            style="text-align: center; margin: 0 auto;"
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>
    <el-dialog title="新闻内容"
               :model="to"
               :visible.sync="centerDialog"
               width="60%"
               center>

        <p v-html="to.content" style="text-align: center"></p>

        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="拒绝理由"
               :model="to"
               :visible.sync="centerDialogVisible"
               width="35%"
               center>
        <el-input
                type="textarea"
                :rows="3"
                v-model="to.reason">
        </el-input>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
</body>
<script>

    var haha = new Vue({
        el:"#app",
        data:{
            formLabelAlign:{
                total:"",
                author:"",
                status:""
            },
            newBsscArr:[],
            centerDialog:false,
            centerDialogVisible:false,
            to:{}
        },
        methods:{
            //置顶
            zhi(id){
                $.get("/ssm/view/getZhi/"+id,function (backData) {
                    getData(1,10);
                })
            },

            //下架
            xia(id){
                $.get("/ssm/view/getXia/"+id,function (backData) {
                    getData(1,10);
                })
            },
            //上架
            shang(id){
                $.get("/ssm/view/getShang/"+id,function (backData) {
                    getData(1,10);
                })
            },

            //详情
            details(id){
                $.get("/ssm/news/get/"+id,function (backData) {
                    haha.centerDialog = true;
                    haha.to = backData.data;
                });
            },
            handleCurrentChange( val ){
                getData(val,10);
            },
            onSubmit(){
                getData(1,10);
            }
        }
    });

    function getData(a , b) {
        haha.formLabelAlign.pageNo = a;
        haha.formLabelAlign.pageCount = b;
        $.post("/ssm/view/queryBssc",haha.formLabelAlign,function (backData) {
            haha.newBsscArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        });
    }
    getData(1,10)
</script>
</html>